/*
 * @Author: shawnxiao
 * @Date: 2021-06-10 14:24:04
 * @LastEditTime: 2021-11-17 18:32:42
 * @FilePath: /gatt-react/src/index/views/Home/components/GattDrag/components/AddDrawer/components/FormRender/index.tsx
 */
import React, {useRef} from 'react'
import DynamicFormReader from '@/components/DynamicFormReader'
import {Button} from 'antd'

// const configs2 = [
//   {
//     'type': 'basic',
//     'title': '基本信息',
//     'dataIndex': 1,
//     'gutter': [20, 20],
//     'list': [
//       {
//         'rules': [{'required': true, 'message': '此为必填项!'}],
//         'key': 'enterpriseName',
//         'title': '企业名称',
//         'type': 'input',
//         'value': '默认企业值',
//         'colSpan': 12,
//         'labelCol': {'span': 24, 'offset': 0},
//         'wrapperCol': {'span': 24, 'offset': 0},
//         'dataIndex': 1
//       },
//       {
//         'rules': [{'required': true, 'message': '此为必填项!'}],
//         'key': 'regionEnterprise',
//         'title': '企业所属区域(级联下拉)',
//         'type': 'cascader',
//         'value': [],
//         'options': [{
//           'value': '11',
//           'label': '北京市',
//           'children': [{
//             'value': '1101',
//             'label': '市辖区',
//             'children': [{
//               'value': '110101',
//               'label': '东城区',
//               'children': [{
//                   'value': '110101001',
//                   'label': '东华门街道'
//                 },
//                 {
//                   'value': '110101002',
//                   'label': '景山街道'
//               }]
//             }]
//           }]
//         }],
//         'dataIndex': 2
//       },
//       {
//         'rules': [{'required': true, 'message': '此为必填项!'}],
//         'key': 'registrationTime',
//         'title': '注册时间',
//         'type': 'datePicker',
//         'format': 'YYYY-MM-DD',
//         'picker': '',
//         'dataIndex': 3
//       },
//       {
//         'rules': [{'required': true, 'message': '此为必填项!'}],
//         'key': 'enterpriseSize',
//         'title': '客商名称(单选)',
//         'tooltip': { 'title': '输入关键词远程搜索查询得到选项数据'},
//         'type': 'select',
//         'showSearch': true,
//         'allowClear': true,
//         'showArrow': true,
//         'value': '',
//         'options': [],
//         'effect': {
//           'fetch': {
//             'action': 'https://suggest.taobao.com/sug',
//             'method': 'GET',
//             'data': {'q': '', 'code': 'utf-8'},
//             'headers': {},
//             'parse': 'function (res){\n   return res.result;\n}',
//             'to': 'options',
//             'jsonp': true
//           },
//           'setFieldsValue': {
//             'enterpriseName': '赋值企业名',
//             'industry': [{value: 2, label: 'bbb'}],
//             'regionEnterprise': ['11', '1101', '110101', '110101001']
//           }
//         },
//         'dataIndex': 4
//       },
//       {
//         'rules': [{'required': true, 'message': '此为必填项!'}],
//         'key': 'industry',
//         'title': '所属行业（可多选）',
//         'type': 'select',
//         'mode': 'multiple',
//         'value': [{value: 1, label: 'aaa'}],
//         'options': [
//           {
//             'value': 1,
//             'label': 'aaa'
//           },
//           {
//             'value': 2,
//             'label': 'bbb'
//           }
//         ],
//         'dataIndex': 5
//       }
//     ]
//   }
// ]
const configs = [
  {
    'type': 'basic',
    'title': '基本数据',
    'dataIndex': 1,
    'noCollapse': true,
    'gutter': [20, 20],
    'list': [
      {
        'rules': [{'required': true, 'message': '此为必填项!'}],
        'key': 'name',
        'title': '名称',
        'type': 'input',
        'value': '',
        'colSpan': 12,
        'labelCol': {'span': 24, 'offset': 0},
        'wrapperCol': {'span': 24, 'offset': 0},
        'dataIndex': 1
      },
      {
        'rules': [{'required': true, 'message': '此为必填项!'}],
        'key': 'type',
        'title': '类型',
        'type': 'select',
        'value': [],
        // 项目类型 1=> 里程碑 2=>计划项目 3=> 分组
        'options': [
          {
            'value': 3,
            'label': '分组'
          },
          {
            'value': 2,
            'label': '计划项目'
          },
          {
            'value': 1,
            'label': '里程碑'
          }
        ],
        'dataIndex': 2
      },
      {
        'rules': [{'required': true, 'message': '此为必填项!'}],
        'key': 'planTime',
        'title': '计划周期',
        'type': 'dateRangePicker',
        'colSpan': 24,
        'showTime': {
          format: 'HH:mm:ss'
        },
        'format': 'YYYY-MM-DD HH:mm:ss',
        'dataIndex': 3
      },
      {
        'rules': [{'required': false, 'message': '此为必填项!'}],
        'key': 'per',
        'title': '进度',
        'type': 'slider',
        'dataIndex': 4
      },
      {
        'rules': [{'required': false, 'message': '此为必填项!'}],
        'key': 'expand',
        'title': '是否展开',
        'type': 'switch',
        'checkedChildren': '开启',
        'unCheckedChildren': '关闭',
        'valuePropName': 'checked',
        'defaultChecked': true,
        'dataIndex': 5
      },
      {
        'rules': [{'required': false, 'message': '此为必填项!'}],
        'key': 'perBgColor',
        'title': '进度背景色',
        'type': 'sketchPicker',
        'value': '',
        'dataIndex': 5
      },
      {
        'rules': [{'required': false, 'message': '此为必填项!'}],
        'key': 'perProcessColor',
        'title': '进度条色',
        'type': 'sketchPicker',
        'value': '',
        'dataIndex': 6
      },
      {
        'key': 'addFields',
        'title': '新增字段',
        'type': 'formList',
        'colSpan': 24,
        'list': [{
          'rules': [{'required': true, 'message': '此为必填项!'}],
          'key': 'fieldName',
          'title': '字段名称',
          'colSpan': 8,
          'labelCol': {'span': 10, 'offset': 0},
          'wrapperCol': {'span': 24, 'offset': 0},
          'type': 'input'
        }, {
          'rules': [{'required': true, 'message': '此为必填项!'}],
          'key': 'fieldKey',
          'title': '字段code',
          'colSpan': 7,
          'labelCol': {'span': 14, 'offset': 0},
          'wrapperCol': {'span': 24, 'offset': 0},
          'type': 'input'
        }, {
          'rules': [{'required': true, 'message': '此为必填项!'}],
          'key': 'fieldValue',
          'title': '字段值',
          'colSpan': 7,
          'type': 'input'
        }],
        'dataIndex': 7
      }
    ]
  }
]

function FormRender() {
  const childRef:any = useRef()
  const onTest = () => {
    // 在组件外部重置表单的值
    const form = childRef.current.getForm()
    console.log(form, form.getFieldsValue())
    // form.resetFields()
  }

  return (
    <div className="form-render-box">
      {/* <Skeleton loading={loadingFormJson} paragraph={{ rows: 6 }} active> */}
      <DynamicFormReader configs={configs} formData={{}} cRef={childRef} />
      {/* </Skeleton> */}
      <Button onClick={onTest}>父级获取子的表单值</Button>
    </div>
  )
}

export default FormRender
